﻿
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <title>设置地图3D视角</title>
</head>
<body>
    <style>
        .BMap_bubble_top {
            /* display: none; */
        }

        .BMap_bubble_pop {
            background-color: #333 !important;
            border: none !important;
        }

            .BMap_bubble_pop img {
                /* display:none; */
                content: url("tail.png");
                /* top:187px !important;  */
            }

        .BMap_bubble_center {
            top: -30px !important;
        }

        .anchorBL {
            display: none !important;
        }

        .panel {
            position: absolute;
            bottom: 10px;
            left: 20px;
            z-index: 99;
        }

        .projectNum {
            color: #fff;
            margin-left: 5px;
            height: 20px;
            line-height: 20px;
        }

        td {
            height: 40px;
        }

        .title {
            position: absolute;
            height: 80px;
            width: 300px;
            right: 0;
            z-index: 998;
            border-radius: 0px 35px 0px 0px
        }

        .ulm {
            padding: 0px;
            margin: 0px;
            list-style-type: none;
        }

            .ulm > li {
                font-size: 14px;
                width: 100%;
                text-align: center;
                height: 30px;
                line-height: 30px;
                cursor: pointer;
            }

                .ulm > li:hover {
                    background: #0070C3;
                    color: #FFF;
                }
    </style>
    <!--右上角-->
    <div class="title">
        <div style="text-align: right;">
            <div>
                <div id="minC" style="display: inline-block;cursor: pointer;">
                    <img src="/min_normal.png" style="height: 28px;width: 28px;" />
                </div>
                <div id="minOrMaxC" style="display: inline-block;cursor: pointer;">
                    <img id="minOrMax" src="/max_max.png" style="height: 28px;width: 28px;" />
                </div>
                <div id="closeC" style="display: inline-block;cursor: pointer;">
                    <img src="/close_normal.png" style="height: 28px;width: 28px;" />
                </div>
            </div>
            <div style="float: right;margin-top: 10px;">
                <div id="menuItemC" style="float: left;margin-right: 10px;cursor: pointer;">
                    <img src="/menu.png" style="height: 43px;width: 43px;" />
                </div>
                <div id="settingC" style="float: left;margin-right: 10px;cursor: pointer;">
                    <img src="/setting.png" style="height: 43px;width: 43px;" />
                </div>
            </div>
            <div id="menuItem" style="border-radius:10px; position: absolute;z-index: 999;right:35px;top: 87px; height: 60px;width: 100px; background: #FFF;display: none;">
                <ul class="ulm">
                    <li data-index="0" style="border-radius: 10px 10px 0 0;"><span>项目管理</span></li>
                    <li data-index="1" style="border-radius: 0 0 10px 10px ;"><span>权限管理</span></li>
                </ul>
            </div>
            <div id="menuAccountC" style="float: right;margin-top: 10px;cursor: pointer;">
                <div style="float: left;margin-right:10px;">
                    <img id="userImage" height="50" width="50" />
                </div>
                <div style="float: left;margin-right:10px;margin-top: 14px;">
                    <span id="userName" style="font-size: 16px;color: #FFF;"></span>
                </div>
                <div style="float: left;float: left;margin-top: 13px;margin-right: 10px;">
                    <img id="imgBottom" src="/bottom.png" />
                </div>
            </div>
            <div id="menuAccount" style="border-radius:10px; position: absolute;z-index: 999;right:115px;top: 93px; height: 90px;width: 100px; background: #FFF;display: none;">
                <ul class="ulm">
                    <li data-index="0" style="border-radius: 10px 10px 0 0;"><span>修改密码</span></li>
                    <li data-index="1"><span>切换账号</span></li>
                    <li data-index="2" style="border-radius: 0 0 10px 10px ;"><span>安全退出</span></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="allmap" style="border-radius:0px">
    </div>
    <div class="panel">
        <table border="0">
            <tr>
                <td><span style="color: #fff;">项目列表：</span></td>
                <td>
                    <select id="projectList" onchange="projectChange()">
                    </select>
                </td>
            </tr>
            <tr>
                <td><img src="logo.png" width="100" height="28"></td>
                <td><div class="projectNum">项目总数：<span id="projectCount">0</span></div></td>
            </tr>
        </table>
    </div>
    <script src="jquery.min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=vQ7aSF2KGzKcOkXkKDYtavT6gQKmG7lH"></script>

    <script>
        var datas = [];
        var map;
        var projectIcon = new BMapGL.Icon("/point.png", new BMapGL.Size(26, 26));
        (async function () {
            await CefSharp.BindObjectAsync("csharp");
            var that = this;
            map = new BMapGL.Map("allmap");
            that._methods = {
                addMarker: function (point, data, icon, isOpenWindow) {
                    var marker = new BMapGL.Marker(point, { icon: icon });
                    map.addOverlay(marker);
                    if (isOpenWindow) {
                        openInfoWindow(data);
                    }
                    marker.addEventListener("click", function () {
                        openInfoWindow(data);
                    });
                },
            };
            function initControls() {
                map.centerAndZoom(new BMapGL.Point(108.55, 34.32), 6);  // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true);
                map.setMapType(BMAP_EARTH_MAP);
                map.setZoom(5.6);// 设置缩放比例
                map.addEventListener('tilesloaded', function () {
                    
                    // var bd = new BMapGL.Boundary();
                    // var province = "河北省、山西省、辽宁省、吉林省、黑龙江省、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、海南省、四川省、贵州省、云南省、陕西省、甘肃省、青海省、台湾省、内蒙古自治区、广西壮族自治区、西藏自治区、宁夏回族自治区、新疆维吾尔自治区、北京市、天津市、上海市、重庆市、香港特别行政区、澳门特别行政区";
                    // var array = province.split("、");
                    // for (var i = 0; i < array.length; i++) {

                    //     bd.get(array[i], function (rs) {
                    //         var hole = new BMapGL.Polygon(rs.boundaries, {
                    //             fillColor: '#F0F8FF',
                    //             fillOpacity: 0.7
                    //         });
                    //         map.addOverlay(hole);
                    //     });
                    // }
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = 'map.js';
                    document.body.appendChild(script);
                });
            }
            initControls();
            //修改密码 切换账号 安全退出弹层显示
            $('#menuAccountC').on('click', function (e) {
                //阻止点击事件冒泡
                e.stopPropagation();
                $('#menuItem').hide();
                $('#menuAccount').show();
                $('#imgBottom').css("transform", "rotate(180deg)");
            });
            $('#menuAccount').on('click', 'li', function () {
                //0 修改密码 1 切换账号  2安全退出
                var index = $(this).data("index");
                if (index == 0) {
                    csharp.onChangePassword();
                } else if (index == 1 || index == 2) {
                    csharp.onLogin();
                }
                $('#menuAccount').hide();
                $('#imgBottom').css("transform", "rotate(0deg)");
            });
            //项目管理 权限管理弹层显示
            $('#menuItemC').on('click', function (e) {
                //阻止点击事件冒泡
                e.stopPropagation();
                $('#menuAccount').hide();
                $('#menuItem').show();
                $('#imgBottom').css("transform", "rotate(0deg)");
            });
            $('#menuItem').on('click', 'li', function () {
                //0项目管理 1权限管理
                var index = $(this).data("index");
                if (index == 0) {
                    csharp.onProject();
                } else if (index == 1) {
                    csharp.onAuthority();
                }
                $('#menuItem').hide();
            });
            //设置
            $('#settingC').on('click', function () {
                csharp.onSetting();
            });
            //点击任意位置隐藏右上角菜单
            $(document).click(function (e) {
                $("#menuItem,#menuAccount").hide();
                $('#imgBottom').css("transform", "rotate(0deg)");
            })
            //最小化
            $('#minC').on('click', function () {
                csharp.onMin();
            });
            //最大化/还原
            $('#minOrMaxC').on('click', function () {
                csharp.onMax();
            });
            //关闭
            $('#closeC').on('click', function () {
                csharp.onClose();
            });
        })();

        //设置用户信息
        function setUserInfo(userName, userImage) {
            $('#userName').text(userName);
            $('#userImage').attr("src", userImage);
        }
        //动态设置最大化图片(后台调用此方法)
        function setMinOrMaxSrc(isMax) {
            $('#minOrMax').attr("src", isMax == "True" ? "/max_max.png" : "/max_normal.png");
        }
        //设置下拉列表
        function setDataList(dataJson) {
            var options = "";
            datas = JSON.parse(dataJson);
            $(datas).each(function (i, item) {
                _methods.addMarker(new BMapGL.Point(item.Longitude, item.Latitude), item, projectIcon, item.IsOpenWindow);
                options += "<option value='" + item.Id + "'>" + item.Name + "</option>";
            });
            $('#projectList').html(options);
            if (datas) {
                $('#projectCount').text(datas.length);
            }
        }
        //下拉框改变事件
        function projectChange() {
            if ($('#projectList').find("option").length > 0) {
                var obj = $('#projectList').prop("selectedIndex")
                if (obj == undefined || obj == null || datas[obj] == undefined || datas[obj] == null) {
                    return;
                }
                openInfoWindow(datas[obj]);
            }
        }
        //打开窗口
        function openInfoWindow(data) {
            var text = "<div style='font-size:14px;color:#a3a3a3;padding:10px'><span style='color:#ffffff;font-size:16px;'>" + data.Name + "</span><br/><span style='margin-top:5px;'>管段总数：" + data.SectionCount + "</span><br/><span style='margin-top:5px;'>管段长度：" + data.SectionLength + "</span><br/><span style='margin-top:5px;'>缺陷总数：" + data.DefectCount + "</span><br/><span style='margin-top:5px;'>建议修复方案：" + data.RepairSuggest + "</span><br/><a href='javascript:void(0);' style='color:#ffffff;margin-top:5px' onclick='csharp.onToMain(" + data.Id + ");'>进入</a></div>";
            var infoWindow = new BMapGL.InfoWindow(text);
            map.openInfoWindow(infoWindow, new BMapGL.Point(data.Longitude, data.Latitude));
        }
    </script>
</body>
</html>

